<template>
    <div class="seekBody">
        <div class="col-xs-9 col-sm-9 col-md-8">
            <div>
                <el-form :inline="true" class="demo-form-inline" style="height:45px;">
                    <el-form-item>
                        <el-input
                            v-model="inputText"
                            placeholder="请输入内容（如：北京）"
                            @keyup.native="showSeek"
                            @blur="hiddenSeek"
                            class="input"
                            ref="input"
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
                <div v-if="seekShow" style="position: absolute;z-index:3;" class="input">
                    <ul class="list-group">
                        <li
                            v-for="(item,index) in showList"
                            :key="index"
                            class="list-group-item"
                            @click="elected(item)"
                        >{{item}}</li>
                    </ul>
                </div>
            </div>
            <div>
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="全部" name="1"></el-tab-pane>
                    <el-tab-pane label="游记攻略" name="2"></el-tab-pane>
                    <el-tab-pane label="结伴同游" name="3"></el-tab-pane>
                    <el-tab-pane label="景点" name="4"></el-tab-pane>
                </el-tabs>
            </div>
            <transition name="fade">
                <ul-list v-model="seekList" v-show="seekResult1"></ul-list>
            </transition>
            <div ref="cardRef"></div>
        </div>
        <transition name="fade">
            <div class="col-xs-3 col-sm-3 col-md-4" style="marginTop:90px;" v-show="seekResult2">
                <el-divider content-position="left">
                    <span class="label label-danger" style="font-size:15px;">著名景点</span>
                </el-divider>
                <transition name="el-zoom-in-top">
                    <div class="row">
                        <div
                            class="col-xs-12 col-sm-6 col-md-4"
                            v-for="(item,index) in extensionList"
                            style="padding:5px;"
                            :key="index"
                        >
                            <router-link
                                to="/scenery"
                                class="thumbnail"
                                style="border:0;margin:0;padding:0;"
                            >
                                <img :src="item.src" height="100px" alt />
                                <div class="caption" style="padding:5px;textAlign:center;">
                                    <div>{{item.title}}</div>
                                </div>
                            </router-link>
                        </div>
                    </div>
                </transition>
            </div>
        </transition>
        <div style="clear:both"></div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            inputText: "",
            showList: [],
            seekShow: false,
            strList: [
                "北京",
                "故宫",
                "上海",
                "杭州",
                "乌镇",
                "绍兴",
                "黄山",
                "九华山",
                "五台山",
                "桂林",
                "南宁",
                "三亚",
                "海口",
                "秦皇岛",
                "厦门",
                "广州",
                "黄山",
                "平遥"
            ],
            activeName: "1",
            seekList: [
                {
                    text_id: 1,
                    src: [
                        require("../../../static/images/seek_1.jpeg"),
                        require("../../../static/images/hot_1.jpg")
                    ],
                    title: "春夏秋冬·我在北京度过四季",
                    text:
                        " 2016年9月，背起行囊，坐上 重庆 到 北京 的火车，只身来到这个陌生的城市上学。转眼间便过了三年，日历已经翻到了2019，原来我在这里已经度过了三个春夏秋冬。记不清当时怀着怎样的心情报考了 北京 的学校，只是一心想要离家远一点，去外面的世界看一看。觉得年轻就是应该出门闯荡。怀着这样的心情，来到 北京 之后，很快便爱上了这里。在南方的时候，从来没有感觉，四季是如此的分明。春天有花开，夏天有蝉鸣，秋天有落叶，冬天有飞雪， 北京 的四季是如此不同。每一次换季的时候，都让我忍不住地拿起相机，去追逐四季的变换。"
                },
                {
                    text_id: 2,
                    src: [
                        require("../../../static/images/seek_2.jpeg"),
                        require("../../../static/images/hot_2.jpg")
                    ],
                    title: "【北京】最爱我的城，一枚土著的非常规玩法",
                    text:
                        "北京 城的建造及其有规律， 四平 八稳的布局，对称的结构，横纵相交的胡同，藏着不少秘密和故事。长在胡 同里 的孩子都知道， 北京 的死胡同不多，只要方向对了，总能走到想要的地方。这也是探索胡同最大的乐趣。谁知道下一个路口拐进去，有什么偶遇呢。在 北京 城，很容易就能分清东南 西北 。胡同、道路都是横平竖直，小时候就是依靠定位天安门的位置，学会了辨别方向。所以你问老 北京 路怎么走，人家都能跟你说清楚，前面第二个路口奔北，再过两个红绿灯向南。而南方的定位，可能得到的答案就是武康路近淮海中路。"
                },
                {
                    text_id: 3,
                    src: [
                        require("../../../static/images/seek_3.jpeg"),
                        require("../../../static/images/hot_7.jpg")
                    ],
                    title: "北京，首都 | 自由行",
                    text:
                        " 为什么要去 北京 ？除了是我爸妈提出来他俩50岁生日时想去看看首都，另外一个原因是我成为了单霁翔院长的小迷妹，还有个原因是.......许久以前，我和一个在 北京 读大学的朋友说：我从 重庆 玩了回来后，发现 长沙 就是个小农村。他说：他从 重庆 玩了回 北京 ，发现 重庆 是个小县城。我：？？？？？？（黑人问号脸）那照你这样说，在你眼里 长沙 可能就是个山窝窝啊。为此，我决定来一场乡里人进城，瞧一瞧他嘴里的 北京 是啥样的。"
                },
                {
                    text_id: 4,
                    src: [
                        require("../../../static/images/seek_1.jpeg"),
                        require("../../../static/images/hot_1.jpg")
                    ],
                    title: "春夏秋冬·我在北京度过四季",
                    text:
                        " 2016年9月，背起行囊，坐上 重庆 到 北京 的火车，只身来到这个陌生的城市上学。转眼间便过了三年，日历已经翻到了2019，原来我在这里已经度过了三个春夏秋冬。记不清当时怀着怎样的心情报考了 北京 的学校，只是一心想要离家远一点，去外面的世界看一看。觉得年轻就是应该出门闯荡。怀着这样的心情，来到 北京 之后，很快便爱上了这里。在南方的时候，从来没有感觉，四季是如此的分明。春天有花开，夏天有蝉鸣，秋天有落叶，冬天有飞雪， 北京 的四季是如此不同。每一次换季的时候，都让我忍不住地拿起相机，去追逐四季的变换。"
                },
                {
                    text_id: 5,
                    src: [
                        require("../../../static/images/seek_3.jpeg"),
                        require("../../../static/images/hot_7.jpg")
                    ],
                    title: "北京，首都 | 自由行",
                    text:
                        " 为什么要去 北京 ？除了是我爸妈提出来他俩50岁生日时想去看看首都，另外一个原因是我成为了单霁翔院长的小迷妹，还有个原因是.......许久以前，我和一个在 北京 读大学的朋友说：我从 重庆 玩了回来后，发现 长沙 就是个小农村。他说：他从 重庆 玩了回 北京 ，发现 重庆 是个小县城。我：？？？？？？（黑人问号脸）那照你这样说，在你眼里 长沙 可能就是个山窝窝啊。为此，我决定来一场乡里人进城，瞧一瞧他嘴里的 北京 是啥样的。"
                }
            ],
            seekResult1: false,
            seekResult2: false,
            extensionList: [
                {
                    title: "故宫",
                    src: require("../../../static/images/rightList_1.jpeg")
                },
                {
                    title: "天安门广场",
                    src: require("../../../static/images/rightList_2.jpeg")
                },
                {
                    title: "八达岭长城",
                    src: require("../../../static/images/rightList_3.jpeg")
                },
                {
                    title: "南锣鼓巷",
                    src: require("../../../static/images/rightList_4.jpeg")
                },
                {
                    title: "颐和园",
                    src: require("../../../static/images/rightList_5.jpeg")
                },
                {
                    title: "鸟巢",
                    src: require("../../../static/images/rightList_6.jpeg")
                },
                {
                    title: "天坛公园",
                    src: require("../../../static/images/rightList_7.jpeg")
                },
                {
                    title: "圆明园",
                    src: require("../../../static/images/rightList_8.jpeg")
                }
            ]
        };
    },
    methods: {
        transition() {
            if (this.seekResult1 == true) {
                this.seekResult1 = false;
            } else {
                this.seekResult1 = true;
            }
        },
        onSubmit() {
            //搜索
            // console.log(this.inputText);
            if (this.inputText.indexOf(" ") < 0) {
                this.seekResult1 = true;
                this.seekResult2 = true;
            }
        },
        showSeek() {
            //输入框键盘抬起

            if (this.inputText.indexOf(" ") < 0) {
                this.seekShow = true;
                this.showList = [];
                this.strList.forEach(element => {
                    if (
                        this.showList.length < 7 &&
                        element.includes(this.inputText)
                    ) {
                        this.showList.push(element);
                    }
                });
                // this.showList = this.strList.filter(item => {
                //     return item.includes(this.inputText);
                // });
                this.seekResult = true;
            } else {
                this.seekShow = false;
            }
        },
        hiddenSeek() {
            //失去光标
            setTimeout(() => {
                this.seekShow = false;
            }, 200);
        },
        elected(i) {
            //联想功能
            this.onSubmit();
        },
        handleClick(tab, event) {
            this.seekList.reverse();
            // console.log(this.activeName)
        },
        throttle(fun, delay, time) {
            var timeout,
                startTime = new Date();

            return () => {
                var curTime = new Date();

                clearTimeout(timeout);
                // 如果达到了规定的触发时间间隔，触发 handler
                if (curTime - startTime >= time) {
                    fun();
                    startTime = curTime;
                    // 没达到触发间隔，重新设定定时器
                } else {
                    timeout = setTimeout(fun, delay);
                }
            };
        }
    },
    mounted() {
        this.$refs.input.focus();

        var that = this;
        function lazyload() {
            //监听页面滚动事件
            var seeHeight = document.documentElement.clientHeight; //可见区域高度
            var scrollTop = document.documentElement.scrollTop; //滚动条距离顶部高度
            // var end = that.$refs.cardRef.length - 1; //现有的数组长度

            if (that.$refs.cardRef.offsetTop < seeHeight + scrollTop) {
                //添加新的图片
                that.$data.seekList.push(
                    {
                        text_id: 1,
                        src: [
                            require("../../../static/images/seek_1.jpeg"),
                            require("../../../static/images/hot_1.jpg")
                        ],
                        title: "春夏秋冬·我在北京度过四季",
                        text:
                            " 2016年9月，背起行囊，坐上 重庆 到 北京 的火车，只身来到这个陌生的城市上学。转眼间便过了三年，日历已经翻到了2019，原来我在这里已经度过了三个春夏秋冬。记不清当时怀着怎样的心情报考了 北京 的学校，只是一心想要离家远一点，去外面的世界看一看。觉得年轻就是应该出门闯荡。怀着这样的心情，来到 北京 之后，很快便爱上了这里。在南方的时候，从来没有感觉，四季是如此的分明。春天有花开，夏天有蝉鸣，秋天有落叶，冬天有飞雪， 北京 的四季是如此不同。每一次换季的时候，都让我忍不住地拿起相机，去追逐四季的变换。"
                    },
                    {
                        text_id: 2,
                        src: [
                            require("../../../static/images/seek_2.jpeg"),
                            require("../../../static/images/hot_2.jpg")
                        ],
                        title: "【北京】最爱我的城，一枚土著的非常规玩法",
                        text:
                            "北京 城的建造及其有规律， 四平 八稳的布局，对称的结构，横纵相交的胡同，藏着不少秘密和故事。长在胡 同里 的孩子都知道， 北京 的死胡同不多，只要方向对了，总能走到想要的地方。这也是探索胡同最大的乐趣。谁知道下一个路口拐进去，有什么偶遇呢。在 北京 城，很容易就能分清东南 西北 。胡同、道路都是横平竖直，小时候就是依靠定位天安门的位置，学会了辨别方向。所以你问老 北京 路怎么走，人家都能跟你说清楚，前面第二个路口奔北，再过两个红绿灯向南。而南方的定位，可能得到的答案就是武康路近淮海中路。"
                    },
                    {
                        text_id: 3,
                        src: [
                            require("../../../static/images/seek_3.jpeg"),
                            require("../../../static/images/hot_7.jpg")
                        ],
                        title: "北京，首都 | 自由行",
                        text:
                            " 为什么要去 北京 ？除了是我爸妈提出来他俩50岁生日时想去看看首都，另外一个原因是我成为了单霁翔院长的小迷妹，还有个原因是.......许久以前，我和一个在 北京 读大学的朋友说：我从 重庆 玩了回来后，发现 长沙 就是个小农村。他说：他从 重庆 玩了回 北京 ，发现 重庆 是个小县城。我：？？？？？？（黑人问号脸）那照你这样说，在你眼里 长沙 可能就是个山窝窝啊。为此，我决定来一场乡里人进城，瞧一瞧他嘴里的 北京 是啥样的。"
                    },
                    {
                        text_id: 4,
                        src: [
                            require("../../../static/images/seek_1.jpeg"),
                            require("../../../static/images/hot_1.jpg")
                        ],
                        title: "春夏秋冬·我在北京度过四季",
                        text:
                            " 2016年9月，背起行囊，坐上 重庆 到 北京 的火车，只身来到这个陌生的城市上学。转眼间便过了三年，日历已经翻到了2019，原来我在这里已经度过了三个春夏秋冬。记不清当时怀着怎样的心情报考了 北京 的学校，只是一心想要离家远一点，去外面的世界看一看。觉得年轻就是应该出门闯荡。怀着这样的心情，来到 北京 之后，很快便爱上了这里。在南方的时候，从来没有感觉，四季是如此的分明。春天有花开，夏天有蝉鸣，秋天有落叶，冬天有飞雪， 北京 的四季是如此不同。每一次换季的时候，都让我忍不住地拿起相机，去追逐四季的变换。"
                    },
                    {
                        text_id: 5,
                        src: [
                            require("../../../static/images/seek_3.jpeg"),
                            require("../../../static/images/hot_7.jpg")
                        ],
                        title: "北京，首都 | 自由行",
                        text:
                            " 为什么要去 北京 ？除了是我爸妈提出来他俩50岁生日时想去看看首都，另外一个原因是我成为了单霁翔院长的小迷妹，还有个原因是.......许久以前，我和一个在 北京 读大学的朋友说：我从 重庆 玩了回来后，发现 长沙 就是个小农村。他说：他从 重庆 玩了回 北京 ，发现 重庆 是个小县城。我：？？？？？？（黑人问号脸）那照你这样说，在你眼里 长沙 可能就是个山窝窝啊。为此，我决定来一场乡里人进城，瞧一瞧他嘴里的 北京 是啥样的。"
                    }
                );
            }
        }
        // 采用了节流函数
        window.addEventListener("scroll", that.throttle(lazyload, 500, 1000));
    }
};
</script>
<style>
div.seekBody {
    margin: 10px 50px;
}

div.seekBody .input {
    width: 400px;
}
@media (max-width: 840px) {
    div.seekBody .input {
        width: 300px;
    }
}
</style>